@import url(https://fonts.googleapis.com/css?family=Cabin:400,700);
$tan: #E6E3DA;
$orange: #F78A52;
$ltorg: #F3C56F;
$yellow: #FEFAD7;
@each $num, $height1, $height2, $height3 in (1, 7px, 2px, 15px), (2, 5px, 10px, 15px), (3, 15px, 5px, 10px){
  @keyframes waves#{$num}{
    0%{
       height: $height1;
       margin-top: -#{$height1};
    }
    10%{
       height: $height2;
       margin-top: -#{$height2};
    }
    20%{
       height: $height3;
       margin-top: -#{$height3};
    }
    30%{
       height: $height1;
       margin-top: -#{$height1};
    }
    40%{
       height: $height2;
       margin-top: -#{$height2};
    }
    50%{
       height: $height1;
       margin-top: -#{$height1};
    }
    60%{
       height: $height3;
       margin-top: -#{$height3};
    }
    70%{
       height: $height2;
       margin-top: -#{$height2};
    }
    80%{
       height: $height3;
       margin-top: -#{$height3};
    }
    90%{
       height: $height1;
       margin-top: -#{$height1};
    }
  }
  @-webkit-keyframes waves#{$num}{
    0%{
       height: $height1;
       margin-top: -#{$height1};
    }
    10%{
       height: $height2;
       margin-top: -#{$height2};
    }
    20%{
       height: $height3;
       margin-top: -#{$height3};
    }
    30%{
       height: $height1;
       margin-top: -#{$height1};
    }
    40%{
       height: $height3;
       margin-top: -#{$height3};
    }
    50%{
       height: $height2;
       margin-top: -#{$height2};
    }
    60%{
       height: $height1;
       margin-top: -#{$height1};
    }
    70%{
       height: $height3;
       margin-top: -#{$height3};
    }
    80%{
       height: $height1;
       margin-top: -#{$height1};
    }
    90%{
       height: $height2;
       margin-top: -#{$height2};
    }
    100%{
       height: $height1;
       margin-top: -#{$height1};
    }
  }
}
*{
  font-family: 'Cabin', sans-serif;
}
html,body{
  height: 100%;
  background: lighten($tan, 3%);
  margin: 0;
  overflow: hidden;
}
body{
  &:before{
    content: ' ';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    bottom: 0;
    border-top: 0vw solid transparent;
    border-left: 25vw solid transparent;
    border-bottom: 150vh solid rgba(darken($tan, 10%), 0.5);
  }
  &:after{
    content: ' ';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    top: 0;
    border-bottom: 0vw solid transparent;
    border-left: 95vw solid transparent;
    border-top: 82vh solid rgba(darken($tan, 10%), 0.5);
  }
}
#player{
  width: 600px;
  position: relative;
  height: 258px;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
}
.circle{
  border-radius: 50%;
}
#circle-cont{
  border: 4px solid $orange;
  width: 250px;
  height: 250px;
  background: $tan;
  position: absolute;
  z-index: 3;
  
  svg{
    z-index: 2;
    position: absolute;
    #song-time{
      stroke: $ltorg;
      stroke-width: 9.5px;
      stroke-dasharray: 2000;
      stroke-dashoffset: 2000;
    }
  }
  #song-content{
    width: 85%;
    height: 70%;
    position: absolute;
    top: 0;
    padding-top: 30%;
    left: 0;
    padding-left: 7.5%;
    padding-right: 7.5%;
    text-align: center;
    box-shadow: 0 0 0 4px $yellow inset;
    border-radius: 50%;
    z-index: 1;
    span{
      display: block;
      &#artist{
        font-weight: 700;
        margin-bottom: 5px;
      }
      &#song{
        font-size: 0.8em;
        color: darken($tan, 55%);
        text-transform: capitalize;
      }
    }
  }
  #pause{
    width: 23px;
    height: 25px;
    position: absolute;
    top: 65%;
    left: 50%;
    margin-left: -11.5px;
    z-index:4;
    display: none;
    &:before{
      content: ' ';
      display: block;
      height: 25px;
      width: 6px;
      background: $orange;
      position: absolute;
      top: 0;
      left: 0;
    }
    &:after{
      content: ' ';
      display: block;
      height: 25px;
      width: 6px;
      position: absolute;
      top: 0;
      right: 0;
      background: $orange;
    }
    &:hover{
      cursor: pointer;
      &:before{
        background: #DF7B46;
      }
      &:after{
        background: #DF7B46;
      }
    }
  }
  #play{
    	width: 0px; 
      height: 0px;
      z-index: 8;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 20px solid $orange;
      top: 65%;
      left: 50%;
      margin-left: -10px;
    &:hover{
      border-left: 20px solid #DF7B46;
      cursor: pointer;
    }
  }
}
#playlist{
  height: 180px;
  width: 400px;
  background: $tan;
  box-shadow: 0 0 0 3px $orange inset, 0 0 0 7px $yellow inset;
  top: 50%;
  margin-top: -100px;
  left: 150px;
  padding: 10px 0;
  position: absolute;
  overflow: hidden;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  &:before{
    content: ' ';
    display: block;
    background-color: darken($tan, 5%);
    mix-blend-mode: multiply;
    width: 275px;
    height: 275px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-top: -137.5px;
    left: -160px;
    z-index:2;
  }
  ul{
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding:0;
    height: 100%;
    list-style-type: none;
    &::-webkit-scrollbar { 
        display: none; 
    }
  }
  li{
    a{
      display: block;
      width: 90%;
      font-size: 0.8em;
      padding: 0.4em 0 0.4em 125px;
      border-bottom: 1px solid darken($tan, 10%);
      box-sizing: border-box;
      overflow: hidden;
      white-space: nowrap;
      color: darken($tan, 55%);
      position: relative;
      &:hover{
        cursor: pointer;
        border-bottom: 1px solid darken($tan, 20%);
        color: #000;
      }
      &.active{
        .waves{
          content: '';
          display: block;
          position: absolute;
          right: 3%;
          top: auto;
          bottom: 5px;
          width: 3px;
          height: 9px;
          background: $orange;
          animation: waves2 forwards 2s infinite;
          &:before{
            content: '';
            display: block;
            position: absolute;
            left: -5px;
            top: auto;
            bottom: 0;
            width: 3px;
            height: 9px;
            background: $orange;
            animation: waves1 forwards 2s infinite;
          }
          &:after{
            content: '';
            display: block;
            position: absolute;
            left: auto;
            top: auto;
            bottom: 0;
            right: -5px;
            width: 3px;
            height: 9px;
            background: $orange;
            animation: waves3 forwards 2s infinite;
          }
        }
      }
    }
    &:last-child{
      a{
        border-bottom: 0;
      }
    }
  }
}
#scrollbar{
  height: 100%;
  width: 40px;
  right: 0;
  position: absolute;
  top: 0;
  z-index: 8;
  #bar{
    border-radius: 4px;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 5px;
    background: darken($tan, 10%);
  }
  #marker{
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: $ltorg;
    border: 2px solid $orange;
    box-shadow: 0 0 0 1px rgba($yellow, 0.5) inset, -1px 2px 0 0px rgba(darken($tan, 25%), 0.75);
    &:after{
      content: '';
      display: block;
      position: absolute;
      height: 5px;
      width: 5px;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      background: rgba($orange, 0.65);
    }
  }
}
#contact{
  position: absolute;
  bottom: 20px;
  left: 20px;
  p{
    margin: 5px 0;
    color: darken($tan, 55%);
    font-size: 14px;
    i{
      color: $orange;
      margin-right: 5px;
    }
  }
}